<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" src="../internal.js"></script>
    <style type="text/css">
        *{margin:0;padding:0;color: #838383;}
        .linkProduct-container input[type="text"] {
            width: 200px;
            height: 28px;
            background-color: #fff;
            background-image: none;
            border: 1px solid #d9d9d9;
            border-radius: 2px;
            font-size: 14px;
            padding: 4px 11px;
            color: rgba(0,0,0,.85);
            display: inline-block;
            outline: none;
        }
        .linkProduct-container input[type="radio"] {
            width: 15px;
            height: 15px;
            float: left;
            margin-right: 4px;
            margin-top: 1px;
            cursor: pointer;
        }
        .linkProduct-container > div {
            margin-top: 15px;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
        }
        .linkProduct-container > div:first-child{
            align-items: center;
        }
        .linkProduct-container > div >span {
            display: inline-block;
            width: 65px;
            text-align: right;
        }
        .linkProduct-container > div >div {
            margin-left: 10px;
        }
        .linkProduct-container .right-product div >span {
            display: inline-block;
            width: 80px;
            text-align: left;
        }
       .linkProduct-container .right-product >div:last-child {
           margin-top: 10px;
        }
        .linkProduct-container .warn-text {
            width: 100%;
            text-align: center;
            display: block;
        }
        .linkProduct-container .warn-text span {
            color: #F9C075;
            display: contents;
        }
        .linkProduct-container .product-radio {
            position: relative;
        }
        .linkProduct-container  #product-item-box {
            position: absolute;
            display: none;
            z-index: 2000;
            top: 38px;
            right: 0;
            width: 220px;
            height: auto;
            background-color: white;
            padding: 10px 0;
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
            border: 1px solid #e4e7ed;
            border-radius: 4px;
        }
        .linkProduct-container  #product-item-box div{
            cursor: pointer;
            height: 34px;
            padding-left: 10px;
            line-height: 34px;
            font-size: 14px;
            color: #606266;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .linkProduct-container  #product-item-box div:hover {
            background-color: #f5f7fa;
        }
    </style>
</head>
<body>
    <div class="linkProduct-container">
        <div class="content-box">
            <span>文本内容：</span>
            <input class="txt" id="text" type="text" disabled="true"/>
        </div>
        <div class="link-box">
            <span>超链接：</span>
            <div class="right-product">
                <div class="product-radio">
                    <span>
                        <input type="radio" id="radio1" name="product" value="1">
                         <span>商品</span>
                    </span>
                    <input class="txt" id="href-product" autocomplete="off"  type="text" >
                       <div id="product-item-box"></div>
                    </input>
                </div>
                <div class="link-radio">
                    <span>
                        <input type="radio" id="radio2" name="product" value="2">
                        <span>自定义链接</span>
                    </span>
                    <input class="txt" autocomplete="off"  id="href" type="text" />
                </div>
            </div>
        </div>
        <div class="warn-text">插入链接需要将其中的渠道信息用(<span>partnerdomain</span>)代替</div>
<script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
   var searchProductObj = {
       name: '',
   } 
   var linkType = 2;
   var productLink = '';

   var searchTimer = null;
    editor.setOpt('allowLinkProtocols', ['http:', 'https:', '#', '/', 'ftp:', 'mailto:', 'tel:']);
    var allowLinkProtocols = editor.getOpt('allowLinkProtocols');

    var range = editor.selection.getRange(),
        link = range.collapsed ? editor.queryCommandValue( "link" ) : editor.selection.getStart(),
        url,
        text = $G('text'),
        rangeLink = domUtils.findParentByTagName(range.getCommonAncestor(),'a',true),
        orgText;
    link = domUtils.findParentByTagName( link, "a", true );

    if(link){
        url = utils.html(link.getAttribute( '_href' ) || link.getAttribute( 'href', 2 ));

        if(rangeLink === link && !link.getElementsByTagName('img').length){
            text.removeAttribute('disabled');
            orgText = text.value = link[browser.ie ? 'innerText':'textContent'];
        }else{
            text.setAttribute('disabled','true');
            text.value = lang.validLink;
        }

    }else{
        if(range.collapsed){
            text.removeAttribute('disabled');
            text.value = '';
        }else{
            text.setAttribute('disabled','true');
            text.value = lang.validLink;
        }

    }
    $G("href").value = url ? url: '';
    setRadioSelected(); // 设置单选框的选中
    $focus($G("href"));

    function handleDialogOk(){
        var href = linkType === 1 ? productLink :  $G('href').value.replace(/^\s+|\s+$/g, '');
        if(href){
            if(!hrefStartWith(href, allowLinkProtocols)) {
                href  = "http://" + href;
            }
            var obj = {
                'href' : href,
                'target' :  "_blank" ,
                // 'title' : $G("title").value.replace(/^\s+|\s+$/g, ''),
                '_href':href
            };
            //修改链接内容的情况太特殊了，所以先做到这里了
            //todo:情况多的时候，做到command里
            if(orgText && text.value != orgText){
                link[browser.ie ? 'innerText' : 'textContent'] =  obj.textValue = text.value;
                range.selectNode(link).select()
            }
            if(range.collapsed){
                obj.textValue = text.value;
            }
            editor.execCommand('link',utils.clearEmptyAttrs(obj) );
            dialog.close();
        }
    }
    dialog.onok = handleDialogOk;

    $G('href').onkeydown = function(evt){
        evt = evt || window.event;
        if (evt.keyCode == 13) {
            handleDialogOk();
            return false;
        }
    };
    function setRadioSelected(){
        $G('radio2').checked= true;
    }
    // 插入商品列表下拉元素，绑定事件
    function insertHtml(data){
        // console.log('dialog：',dialog)
        var str = '';
        data.forEach(function(item){
            var itemName = '('+item.productId+') '+item.productName+'-'+item.planName+'';
            var itemNameTitle = '('+item.productId+')'+item.productName+'-'+item.planName+'';
            var link = 'https://cps.qixin18.com/m/apps/cps/partnerdomain/product/detail?prodId='+item.productId+'&planId='+item.planId+''
            str += '<div class="product_item" title='+itemNameTitle+' data-link='+link+'>' + itemName + '</div>';
        })
        $G('product-item-box').style.display = 'block';
        $G('product-item-box').innerHTML = str;
        setTimeout(function (){
            let doms = Array.from(document.getElementsByClassName('product_item')) || [];
            if(doms.length > 0){
                doms.forEach(function(item){
                    item.addEventListener('click',function(event){
                        $G('product-item-box').style.display = 'none';
                        // console.log('click item:',item)
                        var productUrl = item.getAttribute('data-link');
                        productLink = productUrl;
                        $G('href-product').value = event.target.innerText;
                        // console.log('productLink',productLink);
                    },false)
                })
            }
        },0)
    }
    // 搜索商品输入框事件
    $G('href-product').oninput = function (event){
        var value = event.target.value;
        if(!value){
            setTimeout(function () {
                clearTimeout(searchTimer);
                clearContent();
            },0)
            return 
        }
        searchProductObj.name = value;
        if(searchTimer){
            clearTimeout(searchTimer);
            searchTimer = null;
        }
        searchTimer = setTimeout(searchProduct,500)
    }
    function clearContent(){
        $G('product-item-box').innerHTML = '';
        $G('product-item-box').style.display = 'none';
    }
    function searchProduct(){
        var obj = {
                pageModel:{
                    pageIndex: 1,
                    pageSize: 10,
                },
                goodName: searchProductObj.name
            };
        $.ajax({
            type:'POST',
            url: '//in.hzins.com/qixin/product/queryGoods',
            // url: '//192.168.98.8:8080/vue/qixin/product/queryGoods',
            data: JSON.stringify(obj),
            contentType: 'application/json;charset=UTF-8',
            dataType: 'json',
            success: function(res){
                if(res.code === 0 && res.success){
                    console.log('wocao:',res)
                    var data = res.data?.data;
                    if(data.length > 0){
                        insertHtml(data)
                    }else {
                        clearContent();
                    }
                }else {
                    clearContent();
                }
            }
        })
        if(searchTimer){
            clearTimeout(searchTimer);
            searchTimer = null;
        }
    }

    function hrefStartWith(href,arr){
        href = href.replace(/^\s+|\s+$/g, '');
        for(var i=0,ai;ai=arr[i++];){
            if(href.indexOf(ai)==0){
                return true;
            }
        }
        return false;
    }

    // 单选框事件
    $G('radio1').onchange = setRadioSite;
    $G('radio2').onchange = setRadioSite;
    function setRadioSite(event){
        var value = parseInt( event.target.value);
        linkType = value
    }
</script>
</body>
</html>
